<script>
import request from "../../../../utils/request"
import store from "../../../../store"
import { userActionType } from "../../../../store/modules/user"
import { getShowImage, showModal } from "../../../../utils"
import garbageIcon from "../assets/garbage.png"
import { vocabularyLearningActionType } from "@/store/modules/vocabularyLearning"
import daiBeiAlert from "@/components/daiBeiAlert.vue"

export default {
  name: "toggleSchedule",
  components: { daiBeiAlert },
  computed: {
    userSelectExamId: () => store.getters[userActionType.getters.userSelectExamId],
  },
  methods: {
    getShowImage,
    async init() {
      if (!this.userSelectExamId) {
        await store.dispatch(userActionType.action.examInfo)
      }
      //查询用户当前的计划
      request({
        url: "userCheckPlan/listUserPlan",
        data: {
          examId: this.userSelectExamId,
          size: -1,
          current: 1,
        },
        errorHandle: true,
        showLoading: true,
      }).then((data) => {
        this.userPlanList = data.records
      })
    },
    //切换计划
    async togglePlan(item) {
      // 如果是带背词库类型检查该词库是否允许切换
      if (item.thesaurusCategory === "Racked") {
        if (!(await this.$refs.daiBeiAlert.checkAvailable(item.thesaurusId, item.jumpPaidPage))) return
      }
      if (
        !(await showModal({
          title: "提示",
          content: "确认要切换词库吗？",
        }))
      )
        return
      await request({
        url: "userCheckPlan/switchPlan",
        showLoading: true,
        errorHandle: true,
        data: {
          examId: this.userSelectExamId,
          planId: item.planId,
        },
      })
      this.$emit("backToLearningPage", item.thesaurusCategory)
    },
    //删除计划
    async removePlan(item) {
      if (
        !(await showModal({
          title: "提示",
          content: "确认要删除该计划吗？这将会使当前计划的进度重置",
        }))
      )
        return
      await request({
        url: "userCheckPlan/del",
        data: {
          planId: item.planId,
        },
        showLoading: true,
        errorHandle: true,
      })
      //重新加载列表
      await this.init()
    },
  },
  data() {
    return {
      userPlanList: [],
      garbageIcon,
    }
  },
  emits: ["backToLearningPage"],
}
</script>

<template>
  <view class="page">
    <view class="user-plan-list">
      <view class="user-plan-item" v-for="item in userPlanList" :key="item.planId" @click="togglePlan(item)">
        <image class="icon" :src="getShowImage(item.thesaurusImg)"></image>
        <view class="right">
          <view class="header">
            <!--						题库标题-->
            <view class="title">{{ item.thesaurusName }}</view>
            <!--						当前在学-->
            <view class="current" v-if="item.currentlyStudying === 1">当前在学 </view>
            <!--						删除-->
            <!--						带背类型的计划不允许删除-->
            <view class="delete" v-else-if="item.thesaurusCategory !== 'Racked'" @click.stop="removePlan(item)">
              <image :src="garbageIcon" class="icon"></image>
              删除
            </view>
          </view>
          <!--					学习进度-->
          <view class="process">当前已学 {{ item.currentDay - 1 }} 天</view>
          <view class="process-bar">
            <view class="content" :style="'width:' + (item.studyWordNum / item.thesaurusNum) * 100 + '%'"></view>
          </view>
          <view class="process-footer">
            <view>已学单词</view>
            <view>{{ item.studyWordNum }}/{{ item.thesaurusNum }}</view>
          </view>
        </view>
      </view>
      <view class="placeholder"></view>
      <view class="footer">
        <view
          class="btn"
          @click="
            $uni.navigateTo({
              url: '/vocabulary/pages/makeLearningPlan/thesaurus',
            })
          "
          >添加更多词库
        </view>
      </view>
    </view>

    <daiBeiAlert ref="daiBeiAlert"></daiBeiAlert>
  </view>
</template>

<style scoped lang="scss">
.page {
  padding: 30rpx;

  .user-plan-list {
    .user-plan-item {
      padding: 30rpx;
      display: flex;
      background: white;
      border-radius: 20rpx;
      margin-bottom: 30rpx;
      box-shadow: 0 0 10rpx #e8e8e8;

      > .icon {
        width: 130rpx;
        height: 150rpx;
      }

      > .right {
        width: 0;
        flex: 1;
        margin-left: 30rpx;

        > .header {
          display: flex;
          font-size: 34rpx;

          > .title {
            width: 0;
            flex: 1;
            //文本溢出部分自动加省略号
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: var(--text-color);
            font-weight: 500;
          }

          > .current {
            color: var(--text-color-theme);
          }

          > .delete {
            color: var(--text-color-light);
            display: flex;
            align-items: center;

            > .icon {
              width: 36rpx;
              height: 36rpx;
              margin-right: 10rpx;
            }
          }
        }

        > .process {
          font-size: 28rpx;
          margin-top: 20rpx;
          color: var(--text-color);
        }

        > .process-bar {
          margin-top: 20rpx;
          height: 10rpx;
          background: var(--border-color);
          border-radius: 10rpx;

          > .content {
            border-radius: 10rpx;
            height: 100%;
            width: 0;
            background: var(--theme-color);
          }
        }

        > .process-footer {
          display: flex;
          justify-content: space-between;
          margin-top: 20rpx;
          color: var(--text-color-light);
          font-size: 28rpx;
        }
      }
    }
  }

  .placeholder {
    height: calc(160rpx + env(safe-area-inset-bottom));
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-bottom: calc(30rpx + env(safe-area-inset-bottom));

    .btn {
      margin: 0 30rpx;
      height: 100rpx;
      border-radius: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30rpx;
      background: var(--theme-color);
      color: var(--text-color-white);
    }
  }
}
</style>
